<template>
  <div class="memeory-bg spell-study">
    <Header :isTransBg="true" :width="1000" :isGoBack="false">
      <template v-slot:right>
        <div style="display: flex; align-items: center;">
          <!-- <h3 style="margin-right: 10px;" v-if="content">{{ $route.query.checkedTitle + "-" + content }}</h3>
          <h3 style="margin-right: 10px;" v-else>{{ $route.query.checkedTitle }}</h3> -->
          <el-dropdown style="margin-right: 20px;" trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              换单词<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in wordList" :key="item.id" :disabled="item.id==letterData.id" :command="item">{{ item.content
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="close-memeory" @click="$goRouter('naturalSpellCenter', $route.query)">
            关闭
            <img class="ml5" src="@/assets/img/close-circle.png" alt="" />
          </div>
        </div>
      </template>
    </Header>
    <div class="memory-container spell-study-container w1000" id="spell-study-container">
      <div class="scroll-container" :style="`transform: translateY(${-type * boxHeight}px);`">
        <SpellStudyBox :content="letterData.content" :title="title" :boxHeight="boxHeight" :isShowBtn="isShowBtn0" @goNext="goNext" :type="0">
          <VideoPlay :key="spellStudyBoxKey" v-if="videoData" ref="videoPlay" showId="spell-videoPlay"
            :vid="videoData.url" width="auto" height="2.5rem" @onVideoPlay="onVideoPlay"></VideoPlay>
        </SpellStudyBox>
        <SpellStudyBox :content="letterData.content" :title="title" :boxHeight="boxHeight" :isShowBtn="isShowBtn1" @goNext="goNext" :type="1">
          <!-- v-if="isShowBtn0" -->
          <SpellOneLetter v-if="letterData" :letterData="letterData"></SpellOneLetter>
        </SpellStudyBox>
        <SpellStudyBox :content="letterData.content" :title="title" :boxHeight="boxHeight" :isShowBtn="isShowBtn2" @goNext="goNext" :type="2">
          <SpellStudyWord v-if="spellId" :spellId="spellId" @goNextStep="goNextStep"></SpellStudyWord>
        </SpellStudyBox>
      </div>
    </div>

    <Feedback ref="feedback" :type="1" :classify="1" @openDialog="isOpenMessageBox = true"
      @closeDialog="isOpenMessageBox = false"></Feedback>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Feedback from "@/components/Feedback";
import SpellStudyBox from "./SpellStudyBox.vue";
import SpellOneLetter from "./SpellOneLetter.vue";
import SpellStudyWord from "./spellStudyWord/SpellStudyWord.vue";
import VideoPlay from "../../../components/VideoPlay.vue";
// import { throttle } from "@/utils/utils";
// import EventBus from "@/assets/js/eventBus";
import { getNaturalSpellVideo, postStudyStep } from "@/api/naturalSpell";

export default {
  data() {
    return {
      spellStudyBoxKey: 1,
      content: "",
      checkedBookData: null,
      isOpenMessageBox: false,
      boxHeight: 0,
      type: 0,
      title: "",
      spellId: null,
      isShowBtn0: false,
      isShowBtn1: true,
      isShowBtn2: false,
      videoData: null,
      letterData: null,
      wordList: []
    };
  },
  computed: {
    // spellId(){
    //   return Number(this.$route.query.checkedTypeId)||null
    // }
  },
  watch: {
    "$route.query.checkedTypeId"(newVal, oldVal) {
      this.spellId=newVal
      this.type=0
      if(localStorage.getItem("spellCheckedData")){
        this.letterData = JSON.parse(localStorage.getItem("spellCheckedData"));
      }
      this.getNaturalSpellVideo();
      this.spellStudyBoxKey += 1
    },
    immediate: true
  },
  components: {
    Header,
    Feedback,
    SpellStudyBox,
    SpellOneLetter,
    VideoPlay,
    SpellStudyWord,
  },
  methods: {
    handleCommand(item) {
      this.content = item.content
      let { checkedTitle, source } = this.$route.query
      localStorage.setItem(
        "spellCheckedData",
        JSON.stringify(item)
      );
      this.$goRouter("spellStudy", {
        checkedTypeId: item.id,
        checkedTitle,
        source
      });
    },
    onVideoPlay() {
      this.isShowBtn0 = true;
    },
    pauseVideo() {
      if (this.$refs.videoPlay) {
        this.$refs.videoPlay.pauseVideo();
      }
    },
    postStudyStep() {
      if (Number(this.$route.query.source) >= 2) {
        return;
      }
      let params = {
        elementId: this.spellId,
        source: 2,
      };
      postStudyStep(params).then((res) => {
        console.log(res);
      });
    },
    goNextStep() {
      if (this.type == 2) {
        this.isShowBtn2 = true;
        this.postStudyStep();
      }
    },
    goNext() {
      if (this.type < 2) {
        this.goStep(this.type + 1);
        return;
      }
      if (this.type == 2) {
        this.$goRouter("spellListenTest", this.$route.query);
        return;
      }
    },
    goStep(type) {
      this.type = type;
      this.$pauseAllAudio();
      this.$pauseAllVideo();
      if (type == 0) {
        return;
      }
      if (type == 1) {
        return;
      }
      if (type == 2) {
        return;
      }
    },
    getNaturalSpellVideo() {
      let params = {
        id: this.spellId,
      };
      getNaturalSpellVideo(params).then((res) => {
        if (res.code == 200) {
          this.videoData = res.data[0];
          this.$nextTick(() => {
            this.$refs.videoPlay.initVideo();
          });
        } else {
          this.goStep(1);
        }
      });
    },
    showFeedBack(id) {
      if (id) {
        this.$refs.feedback.visible(id);
      }
    },
  },
  created() {
    this.wordList = JSON.parse(localStorage.getItem("spellCheckeWordlist"))
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.title = this.$route.query.checkedTitle;
    this.spellId = Number(this.$route.query.checkedTypeId);
    this.goStep(0);
    this.letterData = JSON.parse(localStorage.getItem("spellCheckedData"));
  },
  mounted() {
    this.boxHeight = document.getElementById(
      "spell-study-container"
    ).clientHeight;
    this.getNaturalSpellVideo();
  },
  beforeDestroy() { },
};
</script>
<style lang="scss">
.el-popper {
  overflow: auto;
  max-height: 300px !important;

}

::-webkit-scrollbar {
  width: 4px;
  height: 16px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #a3a1a1;
}
</style>